<!-- 存量用户列表 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="6">
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['realName']" placeholder="姓名" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['phone']" placeholder="手机号" />
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['openId']" placeholder="迁移前OPID" />
        </a-form-item>
        <!-- <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['score']" placeholder="福分值" />
        </a-form-item> -->
        <!-- <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['agentNo']" placeholder="历史网点机构号" />
        </a-form-item> -->
        <!-- <a-form-item class="table-search-item">
          <a-date-picker v-model:value="searchData['authTime']" placeholder="实名认证时间" style="width: 100%;" />
        </a-form-item> -->
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['isAuth']" placeholder="实名状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">已实名</a-select-option>
            <a-select-option :value="1">未实名</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['state']" placeholder="迁移状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">已迁移</a-select-option>
            <a-select-option :value="1">未迁移</a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['newAgentNo4']" placeholder="新归属网点机构号" />
        </a-form-item> -->
        <!-- <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['openId']" placeholder="OPID" />
        </a-form-item> -->
        <!-- <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['openId']" placeholder="实际迁移后OPID" />
        </a-form-item> -->
        <!-- <a-form-item class="table-search-item">
          <a-date-picker v-model:value="searchData['syncTime']" placeholder="迁移时间" style="width: 100%;" />
        </a-form-item> -->
        <!-- <a-form-item class="table-search-item">
          <a-input v-model:value="searchData['newAgentNo']" placeholder="客户归属" />
        </a-form-item> -->
        <!-- <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['syncWeek']" placeholder="是否周迁移">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">是</a-select-option>
            <a-select-option :value="1">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['syncMonth']" placeholder="是否月迁移">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">是</a-select-option>
            <a-select-option :value="1">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['syncYear']" placeholder="是否年迁移">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">是</a-select-option>
            <a-select-option :value="1">否</a-select-option>
          </a-select>
        </a-form-item> -->
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_DATA_REPORT_MEMBER_OLD_EXPT')" type="primary" :loading="vdata.exportBtnLoading" @click="exportDataReports">
            <ArrowUpOutlined />
            导出
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'isAuth'">
            <span v-if="record.isAuth === 0">已实名</span>
            <span v-if="record.isAuth === 1">未实名</span>
          </template>
          <template v-if="column.key === 'state'">
            <span v-if="record.state === 0">已迁移</span>
            <span v-if="record.state === 1">未迁移</span>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>
<script lang="ts" setup>
  import { $getOldFansList, $exportOldFansList } from '@/api/dataReports/memberNotic/index'
  import { ref, reactive, getCurrentInstance } from 'vue'
  const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
  const infoTableRef = ref()
  const searchData: any = ref({})
  // 数据源
  const vdata = reactive({
    exportBtnLoading: false,  // 导出按钮loading
  })
  // 表头
  const tableColumns = reactive([
    { key: 'userNo', title: '客户编号', dataIndex: 'userNo', fixed: 'left', width: 120 },
    { key: 'realName', title: '姓名', dataIndex: 'realName', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'phone', title: '手机号', dataIndex: 'phone', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'openId', title: '迁移前OPID', dataIndex: 'openId', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'score', title: '福分值', dataIndex: 'score', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'agentNo', title: '历史网点机构号', dataIndex: 'agentNo', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'agentName', title: '历史网点机构名称', dataIndex: 'agentName', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'cstmNo', title: '信息局唯一标识', dataIndex: 'cstmNo', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'authTime', title: '实名时间', dataIndex: 'authTime', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'isAuth', title: '实名状态', dataIndex: 'isAuth', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'fansId', title: '客户ID', dataIndex: 'fansId', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'state', title: '迁移状态', dataIndex: 'state', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'newOpenId', title: '实际迁移后OPID', dataIndex: 'newOpenId', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'syncTime', title: '迁移时间', dataIndex: 'syncTime', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'newAgentNo', title: '客户归属', dataIndex: 'newAgentNo', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'syncWeek', title: '是否周迁移', dataIndex: 'syncWeek', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'syncMonth', title: '是否月迁移', dataIndex: 'syncMonth', width: 150, minWidth: 150, maxWidth: 180 },
    { key: 'syncYear', title: '是否年迁移', dataIndex: 'syncYear', width: 150, minWidth: 150, maxWidth: 180 },
  ])

  // 请求table接口数据
  function reqTableDataFunc(params) {
    return $getOldFansList(params)
  }
  // 导出数据
  async function exportDataReports() {
    try {
      vdata.exportBtnLoading = true
      await $exportOldFansList(searchData.value)
      $infoBox.message.success('导出成功，请到下载目录查看！')
    } finally {
      vdata.exportBtnLoading = false
    }
  }
  // 搜索
  function searchFunc() {
    infoTableRef.value.refTable(true)
  }
</script>